import classNames from "classnames";
import React, { memo } from "react";
import { useDrag } from "react-dnd";
import "./index.less";

export const DragItem = memo(function DragItem({
  id,
  type,
  content,
  isDropped,
  checked,
}) {
  const [{ opacity }, drag] = useDrag(
    () => ({
      type,
      item: { type, checked, content, id },
      collect: (monitor) => ({
        opacity: monitor.isDragging() ? 0.4 : 1,
      }),
    }),
    [id, type]
  );
  return (
    <div
      className={classNames({
        "drag-item": !checked,
        "drag-item-checked": checked,
      })}
      ref={drag}
      style={{ opacity }}
      data-testid="box"
    >
      <span>{content}</span>
    </div>
  );
});
